<template>
    <view class="old-phone common-interval">
        <view class="title">为了保证您的账户安全，需要您验证原定的手机号码</view>
        <view class="bind-phone">已绑定手机号码{{phoneNum}}</view>
        <gw-verification-code v-model="verificationCode" :type="1"/>
        <view class="common-txt" @tap="nextStep" style="margin-top: 46rpx;">下一步</view>
    </view>
</template>

<script>
    import gwVerificationCode from '@/pages/components/gw-verification-code';
    import { vCode } from "@/util/commonFn";
    import { mapGetters } from 'vuex';
    export default {
        name: "oldPhone",
        components: {
            gwVerificationCode
        },
        computed: {
            ...mapGetters(['phoneNum'])
        },
        data(){
            return{
                verificationCode: ''
            }
        },
        methods: {
            nextStep(){
                if(!this.verificationCode){
                    uni.showToast({
                        title: '请先输入验证码！',
                        duration: 2500,
                        icon: 'none'
                    });
                    return;
                }
               this.vCodeFn({
                   type: 1,
                   code: this.verificationCode,
               })
            },
            vCodeFn(params){
                vCode(params).then(res => {
                    if(res.status){
                        uni.navigateTo({
                            url: './bind-new-phone'
                        });
                    } else{
                        uni.showToast({
                            title: '请确保验证码正确哦！',
                            duration: 2500,
                            icon: 'none'
                        });
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .title{
        margin-top: 40rpx;
    }
    .bind-phone{
        margin-top: 34rpx;
        font-weight:bold;
        font-size: 32rpx;
        margin-bottom: 80rpx;
    }
    .phone-input-wrapper{
        position: relative;
    }
</style>